<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码生成</title>
    <style type="text/css">
        body{margin:60px auto}
        a{color:blue;text-decoration:none;background-color:#ddd;border:1px solid#ccc;display:inline-block;margin:5px 0;padding:10px 20px;cursor:pointer;min-width:280px}
        div.m-panel{width:542px;margin:0 auto;}
        div.nav{width:500px;background-color:#eee;border:1px solid#aaa;padding:25px 20px;margin:0 auto;}
        h2{color:blue;font-weight:bold}
        button{width:56px;height:26px;background-color:#708eea;outline:none;border:none;color:#FFF}
        button:active{background-color:#3e65e0;color:#FFF}
        form>div{margin:8px 0;}
        div.nav label.item-name{display:inline-block;width:100px;font-size:16px;text-align:right;vertical-align:top;}
        div.nav input[type="radio"]{margin:8px 0}
        div.nav input[type="text"]{display:inline-block;height:20px;min-width:280px;}
        div.nav textarea{min-width:282px;height:100px;}
        #msg{display: inline-block;margin: 10px 0 0 0;color: red;font-weight: bold;}
    </style>
</head>
<body>
<!--<h1>{{.Heading}}</h1>
<p>{{.Message}}</p>-->
<div class="m-panel">
    <h2>代码生成</h2>
</div>
<div class="nav">
    <form id="myGenForm" action="/gen/exec" method="post" enctype="multipart/form-data">
        <div>
            <label class="item-name">代码类型：</label>
            <input type="radio" id="radio-11" name="genType" value="11" />
            <label for="radio-11">实表数据接口及模板</label><br />

            <label class="item-name">&nbsp;</label>
            <input type="radio" id="radio-12" name="genType" value="12" />
            <label for="radio-12">实表数据接口及页面</label><br />

            <label class="item-name">&nbsp;</label>
            <input type="radio" id="radio-13" name="genType" value="13" />
            <label for="radio-13">实表数据接口</label><br />

            <label class="item-name">&nbsp;</label>
            <input type="radio" id="radio-21" name="genType" value="21" />
            <label for="radio-21">逻辑业务接口及页面</label><br />

            <label class="item-name">&nbsp;</label>
            <input type="radio" id="radio-22" name="genType" value="22" />
            <label for="radio-22">逻辑业务接口</label><br />
        </div>
        <div>
            <label class="item-name">项目目录：</label>
            <input type="text" id="genBasePath" name="genBasePath" placeholder="项目根目录/~" value="">
        </div>
        <div>
            <label class="item-name">标题：</label>
            <input type="text" id="pageTitle" name="pageTitle" placeholder="测试记录" value="">
        </div>
        <div>
            <label class="item-name">模块名：</label>
            <input type="text" id="moduleName" name="moduleName" placeholder="mortal" value="">
        </div>
        <div>
            <label class="item-name">文件名：</label>
            <input type="text" id="fileName" name="fileName" placeholder="test_struct" value="">
        </div>
        <div>
            <label class="item-name">类名：</label>
            <input type="text" id="className" name="className" placeholder="testStruct" value="">
        </div>
        <div id="form-item-tableName">
            <label class="item-name">数据表：</label>
            <input type="text" id="tableName" name="tableName" placeholder="table_test" value="">
        </div>
        <div id="form-item-viewName">
            <label class="item-name">视图名：</label>
            <input type="text" id="viewName" name="viewName" placeholder="view_name" value="">
        </div>
        <div id="form-item-viewSql">
            <label class="item-name">数据视图：</label>
            <textarea id="viewSql" name="viewSql" placeholder="view_sql"></textarea>
        </div>
        <div>
            <label class="item-name">&nbsp;</label>
            <button type="button" onclick="submitGen()">确定</button>
        </div>
        <div>
            <label class="item-name">&nbsp;</label>
            <span id="msg"></span>
        </div>
    </form>
</div>

<script src="/gen/lib/jquery/jquery-1.11.0.min.js"></script>
<script src="/gen/lib/jquery/plugin/jquery.form.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="radio"]').change(radioChange);

        console.log("加载完成")
        setRadioValue("genType")
        setElementValue("genBasePath")
        setElementValue("pageTitle")
        setElementValue("moduleName")
        setElementValue("fileName")
        setElementValue("className")
        setElementValue("tableName")
        setElementValue("viewName")
        setElementValue("viewSql")

        //console.log(encodeURIComponent(document.getElementById("viewName").value))
    });

    radioChange = function() {
        // 获取被选中的radio按钮的值
        let selectedValue = $('input[name="genType"]:checked').val();

        switch (selectedValue) {
            case "11":
            case "12":
            case "13":
                $("#form-item-tableName").show()
                $("#form-item-viewName").hide()
                $("#form-item-viewSql").hide()
                break;
            case "21":
            case "22":
                $("#form-item-tableName").hide()
                $("#form-item-viewName").show()
                $("#form-item-viewSql").show()
                break;
            default:
        }

        // 在这里可以执行你想要的操作
        //console.log('选中的radio值为：' + selectedValue);
    }

    function submitGen(){
        console.log("调用方法")

        $("#myGenForm").ajaxSubmit({
            success: function (html, status) {
                $("#msg").html(html);
                // 设置一个3000毫秒（3秒）的延迟
                setTimeout(function() {
                    $("#msg").html('');
                }, 2000);
            },
            error: function (res, msg) {
                $("#msg").html("出错了，" + res.responseText);
                // 设置一个3000毫秒（3秒）的延迟
                setTimeout(function() {
                    $("#msg").html('');
                }, 2000);
            }
        });
    }

    function getQueryParam(param) {
        // 获取当前页面的 URL
        let url = window.location.href;

        // 查找查询参数部分
        let queryString = url.split('?')[1];
        if (!queryString) {
            return null; // 没有查询参数部分
        }

        // 分割查询参数成键值对
        let params = queryString.split('&');

        // 遍历键值对，找到匹配的参数
        for (let paramPair of params) {
            let [key, value] = paramPair.split('=');
            if (key === param) {
                return decodeURIComponent(value);
            }
        }

        return null; // 没有找到匹配的参数
    }

    function setRadioValue(elementId) {
        let aValue = getQueryParam(elementId);
        //console.log('Value of Radio:', aValue);
        let radios = document.getElementsByName(elementId);
        for (let i = 0; i < radios.length; i++) {
            if (radios[i].value === aValue) {
                radios[i].checked = true;
                break; // 找到后退出循环
            }
        }
        radioChange()
    }
    function setElementValue(elementId) {
        let aValue = getQueryParam(elementId);
        //console.log('Value of Element:', aValue);
        let inputElement = document.getElementById(elementId);
        inputElement.value = aValue || '';
    }
</script>
</body>
</html>
